<template>
	<el-table-column v-bind="$attrs" :min-width="minWidth" show-overflow-tooltip>
		<template #default="{ row }">
			<div v-if="!isEdit">{{ row[prop] }}</div>
			<MkDateTime v-model="row[prop]" :isEdit="isEdit" minWidth="100%" v-else />
		</template>
	</el-table-column>
</template>
<script lang="ts" setup>
// 表格内可编辑的日期选择框，用于表格内的日期选择框，例如：
// <MkColumnInputDate prop="chuShaiRQ" label="出生日期" :isEdit="ctx.isEdit" />
defineOptions({
	name: 'MkColumnInputDate',
});

const props = defineProps({
	prop: {
		type: String,
		required: true,
	},
	isEdit: {
		type: Boolean,
		default: false,
	},
	autoWidth: {
		type: Boolean,
	},
	minWidth: {
		type: [String, Number],
		default: 120,
	},
});

</script>
<style lang="scss" scoped>
:deep(.parent-div) {
	// top: calc(var(--el-form-label-font-size) * 0.5);
	// top: calc(var(--el-form-label-font-size) * 0.5);
	/* 默认值 */
}

:deep(.mk-datetime-div) {
	width: 100%;
	min-width: 100%;
}

:deep(tbody .el-table__row) {
	.el-table__cell {
		text-align: center;
		padding: 0;
	}


	.cell {
		padding: 0;
		width: auto !important;
	}

	.el-table-column--selection .cell {
		padding: 0 40%;
	}

	.el-input {
		width: 100% !important;
	}
}
</style>
